<template>
  <el-container>
    <el-header>
      <el-tabs v-model="activeTab">
        <el-tab-pane label="普通用户注册" />
      </el-tabs>
    </el-header>
    <el-main>
      <!-- element-plus 的form表单 -->
      <el-form :model="formData" ref="formRef" :rules="rules" status-icon>
        <!-- 用户名 -->
        <el-form-item label="用 户 名&nbsp;" prop="username">
          <el-input v-model="formData.username" placeholder="请输入用户名" />
        </el-form-item>
        <!-- 第一次密码 -->
        <el-form-item label="密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码" prop="password">
          <el-input 
          v-if="!showPassword" 
            type="password" 
            v-model="formData.password" 
            placeholder="请输入密码"

          />
          <el-input 
            type="text" 
            v-if="showPassword" 
            v-model="formData.password" 
            placeholder="请输入密码"

          />
          <el-button @click="togglePasswordVisibility">{{ showPassword ? '隐藏' : '显示' }}</el-button>
          <div class="password-rules">密码长度为6~16位，必须且只能包含数字和字母，区分大小写</div>
        </el-form-item>
        <!-- 第二次密码 -->
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input 
            type="password" 
            v-model="formData.confirmPassword" 
            placeholder="请再次输入密码" 
          />
        </el-form-item>
        <el-button type="primary" @click="handleRegister">注册</el-button>
      </el-form>
    </el-main>
  </el-container>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { signin } from '@/request/axios';
import { useRouter } from 'vue-router';
const $router = useRouter()

const formData = ref({
  username: '',
  password: '',
  confirmPassword: '',
  type: 'common',
});
let  register = false

const showPassword = ref(false);
const rules = {
  username: { required: true, message: '用户名不能为空', trigger: 'blur' },
  password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 16, message: '密码长度为6~16位', trigger: 'blur' },
          { pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,16}$/, message: '密码必须包含数字和字母，且区分大小写', trigger: 'blur' }
        ],
  confirmPassword: [
    { required: true, message: '请确认密码', trigger: 'blur' },
    { validator: (rule, value, callback) => {
      if (value !== formData.value.password) {
        callback(new Error('两次输入的密码不匹配'));
      } else {
        register = true
        callback();
      }
    }, trigger: 'blur' }
  ]
};

const handleRegister = async () => {
if(register){
  const { username, password, type } = formData.value; // 提取需要的属性
  const response = await signin(username, password, type)
  
  if (response.data.code === 200) {
    ElMessage.success('注册成功！');
      // 将账号密码存储到本地
  localStorage.setItem('account', JSON.stringify(formData.value))
    // 跳转到登录页面
    $router.back()
  } else if (response.data.code === 400) {
    ElMessage.error(response.data.msg);
    // 清空表单
    formData.value.username = '';
    formData.value.password = '';
    formData.value.confirmPassword = '';
  }
}
};

const togglePasswordVisibility = () => {
  showPassword.value = !showPassword.value;
};
</script>

<style scoped>
.password-rules {
  font-size: 12px;
  color: #888;
  margin-top: 5px;
}
</style>